import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { fileURLToPath, URL } from "url";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import postcsspxtoviewport from "postcss-px-to-viewport";
import UnpluginSvgComponent from "unplugin-svg-component/vite";

import vueDevTools from "vite-plugin-vue-devtools";

export default defineConfig({
	plugins: [
		vue(),
		vueDevTools(),
		Icons({
			autoInstall: true,
			compiler: "vue3",
		}),
		AutoImport({
			imports: ["vue", "pinia", "vue-router"],
			resolvers: [ElementPlusResolver()],
			eslintrc: {
				// 已存在文件设置默认 false，需要更新时再打开，防止每次更新都重新生成
				enabled: false,
				// 生成文件地址和名称
				filepath: fileURLToPath(new URL("./.eslintrc-auto-import.json", import.meta.url)),
				globalsPropValue: true,
			},
			dts: "./src/types/auto-imports.d.ts",
		}),
		Components({
			resolvers: [
				IconsResolver({
					prefix: false, // 自动引入的Icon组件统一前缀，默认为 i，设置false为不需要前缀
					enabledCollections: ["ep"],
				}),
				ElementPlusResolver(),
			],
			dts: "./src/types/components.d.ts",
		}),
		UnpluginSvgComponent({
			iconDir: fileURLToPath(new URL("./src/assets/icons", import.meta.url)),
			dts: true,
			dtsDir: fileURLToPath(new URL("./src/types", import.meta.url)),
			// 保留颜色的图标名称
			// preserveColor: new RegExp("color", "gi"),
			preserveColor: fileURLToPath(new URL("./src/assets/icons/color", import.meta.url)),
			// 定义引用 svg 时名称前缀（不在文件名称中）
			prefix: "icon",
			// svg 文件被使用扫描策略，默认 component 为组件扫描策略，text 为路径文件扫描策略
			scanStrategy: "text",
			symbolIdFormatter: (svgName: string, prefix: string): string => {
				const nameArr = svgName.split("/");
				if (prefix) nameArr.unshift(prefix);
				return nameArr.join("-").replace(/\.svg$/, "");
			},
		}),
	],
	resolve: {
		// 设置文件./src路径为 @
		alias: {
			"@": fileURLToPath(new URL("./src/", import.meta.url)),
		},
	},
	server: {
		host: "0.0.0.0",
		port: 80,
	},
	css: {
		postcss: {
			plugins: [
				postcsspxtoviewport({
					unitToConvert: "px", // 要转化的单位
					viewportWidth: 720, // UI设计稿的宽度
					unitPrecision: 3, // 转换后的精度，即小数点位数
					propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
					viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
					fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
					selectorBlackList: [], // 指定不转换为视窗单位的类名，
					minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
					mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
					replace: true, // 是否转换后直接更换属性值
					exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
					// exclude: [],
					landscape: true, // 是否处理横屏情况
					landscapeWidth: 1920,
				}),
			],
		},
	},
});
